<script setup>
import {computed, onMounted, reactive} from "vue";
import {ArrowLeft} from "@element-plus/icons-vue";
import {createRouter as $router, useRoute} from "vue-router";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

// 获取路由信息
const thisRoute = useRoute();
// 存储用户的默认收货信息
const userInfo = reactive([
  {
    id: '1',
    name: '张三',
    address: '富华中路',
    phone: '13666666666',
  },
  {
    id: '2',
    name: '李四',
    address: '富华低路',
    phone: '14666666666',
  },
])

const form = reactive({
  name: '',
  phone: '',
  address: '',
  payMethod: '',
  logisticsMethod: '',
  goodsId: '',
  amount: '',
  goodsPrice: '',
})

const totalPrice = computed(() => {
  return form.goodsPrice * form.amount;
});

// 设置初始信息
const setDefault = () => {
  form.name = userInfo[0].name;
  form.address = userInfo[0].address;
  form.phone = userInfo[0].phone;
  form.goodsId = thisRoute.query.id;
  form.amount = thisRoute.query.amount;
  form.goodsPrice = thisRoute.query.price;
}

// 获取数据
const fetchData = () => {
}

// 初始化
onMounted(() => {
  fetchData();
  setDefault();
})

</script>

<template>

  <div class="app">
    <!--页头-->
    <el-page-header :icon="ArrowLeft" @click="router.back()">
      <template #title>
        <span>后退</span>
      </template>
    </el-page-header>
    <el-divider/>

    <div class="order-top">
      <!--标题-->
      <div class="horizontal-layout">
        <img class="logo" src="@/assets/pdd-logo.png" alt="logo">
        <div>结算页</div>
      </div>
      <!--步骤条-->
      <el-steps
          class="steps"
          :space="200"
          :active="2"
          align-center
          finish-status="success"
      >
        <el-step title="1.浏览商品"/>
        <el-step title="2.填写核实订单信息"/>
        <el-step title="3.成功提交订单"/>
      </el-steps>
    </div>
    <div class="form-title">填写并核对订单信息</div>
    <!--表单-->
    <el-form
        class="form"
        label-position="top"
        label-width="auto"
        :model="form"
    >

      <el-form-item label="收货人信息">
        <div class="recipient-info-item">
          <div>
            <el-button v-model="form.address"
                       @click="evt => {form.name=userInfo[0].name;form.address=userInfo[0].address;form.phone=userInfo[0].phone}">
              {{ userInfo[0].name }} {{ userInfo[0].address }} {{ userInfo[0].phone }}
            </el-button>
            <el-tag type="info" class="default-address-tag">默认地址</el-tag>
          </div>
          <el-collapse>
            <el-collapse-item title="更多地址" name="1">
              <el-button v-for="(item, index) in userInfo" :key="index" v-show="index >0"
                         @click="evt => {form.name=item.name;form.address=item.address;form.phone=item.phone}"
              >
                {{ item.name }} {{ item.address }} {{ item.phone }}
              </el-button>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form-item>

      <el-form-item label="支付方式">
        <el-radio-group v-model="form.payMethod" fill="#E4393C" text-color="#E4393C" size="large">
          <el-radio value="货到付款" border>货到付款</el-radio>
          <el-radio value="在线支付" border>在线支付</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-divider/>
      <el-form-item label="送货清单">
        <el-radio-group v-model="form.logisticsMethod" size="large">
          <el-radio value="上门自提" border>上门自提</el-radio>
          <el-radio value="京东快递" border>京东快递</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!--总结1-->
    <div class="shopping-summary-1">
      <table style="margin-left: auto;">
        <tr>
          <td>单价：</td>
          <td style="text-align: right; color: #E4393C">￥{{ form.goodsPrice }}</td>
        </tr>
        <tr>
          <td>数量：</td>
          <td style="text-align: right; color: #E4393C">{{ form.amount }}</td>
        </tr>
      </table>
    </div>
    <!--总结2-->
    <div class="shopping-summary-2">
      <div style="float: right">
        <div class="total-amount">
          <span class="total-amount-key">应付总额：</span>
          <span class="total-amount-value">￥{{ totalPrice }}</span>
        </div>
        <div class="last-info">
          <span style="margin-right: 10px">寄送至：{{ form.address }}</span>
          <span>收件人：{{ form.name }} {{ form.phone }}</span>
        </div>
      </div>
    </div>
    <!--提交订单-->
    <div style="display: block;width: 100%;">
      <el-button type="danger" size="large" style="float: right;">提交订单</el-button>
    </div>
  </div>

</template>

<style scoped lang="less">
@import "@/assets/Order.css";
</style>

<style lang="less">
.el-radio__input.is-checked + .el-radio__label {
  color: #666666;
}

.el-radio.is-bordered.is-checked {
  border-color: #E4393C;
  border-radius: 0px;
  border-width: 2px;
}

.el-radio.is-bordered {
  border-color: #999999;
}

.el-radio__label {
  padding-left: 0px;
}

.el-radio__input {
  //让选中的圆点不显示
  display: none;
}

.el-radio {
  padding: 6px 15px 0 15px;
  padding-bottom: 0px;
  border-radius: 0px;
  height: 28px;
  width: 100px; //宽度可以自定义，如果不自定义，会根据label长度和padding生成
  font-size: 16px;
}
</style>